<!-- 
	name: 悬浮菜单
	version: v0.0.1
	update_time: 2020-6-25 
 -->
<template>
	<view>
		<!-- 遮罩 -->
		<view class="mask" v-if="show" @tap="hidemask()" @touchmove.stop.prevent></view>
		<!-- 按钮 -->
		<view class="major-box" :style="{top: top + 'px' }">
			<view class="click-btn" @tap="showmask()" draggable="true" @touchstart="touchstart"
				@touchmove.stop.prevent="touchmove">
				<view class="icon">
					<u-icon name="list-dot" v-if="show == false" color="#ffffff" size="24"></u-icon>
					<u-icon name="close" v-if="show == true" color="#ffffff" size="24"></u-icon>
				</view>
			</view>
		</view>
		<view>
			<view class="nav-box" :class="show == true?'show':'hide'">
				<view class="nav-btn" :class="btn.check == true?'yes':''" v-for="(btn, index) in btnList" :key="index"
					@tap="clickBtn(btn,index)">
					<view class="nav-icon">
						<image :src="btn.icon" mode=""></image>
					</view>
					<view class="nav-text">{{btn.name}}</view>
				</view>
			</view>
		</view>
		<view class="" v-if="showshare == true">
			<view class="share">
				<view class="poster bg-white">
					<view class="poster-bg">
						<image src="/static/tabbardetails/share_bg.png" mode="widthFix"></image>
					</view>
					<view class="share-zi f28 color3">
						sally yap11233 hdhjd dhdjj ebjeyoavs snls rfjcid ...
					</view>
				</view>
				<view class="share-type bg-white">
					<view class="two fbox fbox-acenter fbox-jaround">
						<view class="two-item fbox fbox-column fbox-acenter" @click="shareimg()">
							<image src="/static/login/wx.png" mode="widthFix"></image>
							<text>Sharing with Wechat</text>
						</view>
						<view class="two-item fbox fbox-column fbox-acenter">
							<image src="/static/tabbardetails/fookbook.png" mode="widthFix"></image>
							<text>Sharing with Wechat</text>
						</view>
					</view>
					<view class="share-btn" @click="close">
						Cancel Sharing
					</view>
				</view>
			</view>
		</view>
		
		<contact v-if="contshow == true" @hide="hidecont"></contact>
	</view>
</template>

<script>
	import contact from "@/components/contact.vue"
	export default {
		components: {
			contact,
		},
		data() {
			return {
				show: false, // 是否显示
				showshare:false,
				contshow:false,
				top: 500, // 顶端距离 
				deviationTop: 0, // 偏移量
				windowHeight: uni.getSystemInfoSync().windowHeight, // 视图高度 
				btnList: [{
					icon: 'https://dongya.hualin688.com/upload/gallery/thumbnail/B2E4C369-C2FC-6988-8C5655852A1B-tbl.png',
					name: 'Daily Sign-Up'
				}, {
					icon: 'https://dongya.hualin688.com/upload/gallery/thumbnail/6749EEAE-3EB5-7802-53695C0D291D-tbl.png',
					name: 'Sevrivce Centre'
				}, {
					icon: 'https://dongya.hualin688.com/upload/gallery/thumbnail/6749EEAE-3EB5-7802-53695C0D291D-tbl.png',
					name: 'Share MUSE'
				}, {
					icon: 'https://dongya.hualin688.com/upload/gallery/thumbnail/E84B6AE3-8623-5664-3FD43F222023-tbl.png',
					name: 'Chatting Room'
				}, {
					icon: 'https://dongya.hualin688.com/upload/gallery/thumbnail/A4853E03-C2FF-7503-7736FB18366F-tbl.png',
					name: 'Contact Us'
				}, ],
				address: '',
				info: {}
			};
		},
		methods: {
			shareimg(){
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 2,
					imageUrl: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png",
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			showmask(){
				this.show = !this.show
				if(this.show == true){
					uni.hideTabBar()
				}else{
					uni.showTabBar()
				}
				
			},
			hidemask(){
				this.show = false
				uni.showTabBar()
			},
			close() {
				this.showshare = false
				uni.showTabBar()
			},
			hidecont() {
				this.contshow = false
				uni.showTabBar()
			},
			clickBtn(item, index) {
				if (index == 0) {
					this.show = false
					uni.showTabBar()
					uni.showLoading({
						mask: true
					})
					const params = {
						map: 'applet_community_attendance'
					}
					this.$Request({
						method: 'GET',
						data: params
					}).then(res => {
						if (res.data.ec == 200) {
							uni.hideLoading()
							uni.showToast({
								title: res.data.data.msg,
								icon: 'none'
							})
						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.data.em,
								icon: 'none'
							})
						}
					})
				}
				if (index == 1) {
					this.show = false
					uni.showTabBar()
					uni.navigateTo({
						url:'/pages/user/cart/index'
					})
				}
				if (index == 2) {
					this.show = false
					this.showshare = true
				}
				if (index == 3) {
					this.show = false
					this.contshow = true
				}
				if(index == 4){
					this.show = false
					uni.showTabBar()
					uni.navigateTo({
						url:'/pages/user/cartlist/index'
					})
				}
			},
			// 拖动开始，记录一下偏移量
			touchstart: function(e) {
				var touch = e.touches[0] || e.changedTouches[0];
				this.deviationTop = touch.clientY - this.top;
			},
			// 上下拖动时 
			touchmove: function(e) {
				var touch = e.touches[0] || e.changedTouches[0];
				var top = touch.clientY;
				top = top - this.deviationTop;
				if (top < 0) {
					top = 0;
				}
				if (top > this.windowHeight - 40) {
					top = this.windowHeight - 40;
				}
				this.top = top;
				return false;
			},
		}
	};
</script>

<style scoped lang="scss">
	.share {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 999999;
		background-color: rgba(0, 0, 0, .4);
	
		.poster {
			position: fixed;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding: 30rpx;
			// box-sizing: border-box;
			width: 80%;
			border-radius: 30rpx;
	
			.poster-bg {
				margin: 0rpx auto;
	
				image {
					width: 100%;
				}
			}
	
			.share-zi {
				margin-top: 10rpx;
			}
	
		}
	
		.share-type {
			position: fixed;
			bottom: 0;
			width: 100%;
			padding: 40rpx 0;
			border-radius: 40rpx 40rpx 0 0;
	
			.two {
				.two-item {
					image {
						width: 110rpx;
					}
	
					text {
						margin-top: 10prx;
						font-size: 26rpx;
						color: #6f6f6f;
					}
				}
			}
	
			.share-btn {
				border: 1px solid #e0f0ff;
				color: #2497ff;
				width: 90%;
				margin: 40rpx auto 0rpx;
				padding: 30rpx 0;
				text-align: center;
				border-radius: 50rpx;
			}
		}
	}
	/* 遮罩 */
	.mask {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 1000;
		background: rgba(0, 0, 0, 0.4);
	}

	/* 总盒子 */
	.major-box {
		border: 1px 0 solid;
		z-index: 1000;
		position: fixed;
		right: 0;
	}

	/* 展开时 */
	.show {
		top: 400rpx !important;
		opacity: 1;
		z-index: 1000 !important;
	}

	.hide {
		top: 0rpx !important;
		opacity: 0;
		z-index: -1 !important;
	}

	.nav-box {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		margin: auto;
		transition: all 0.2s;
		z-index: 1000;
		background-color: #FFF;
		border-radius: 0 0 0 5px;
		width: 400rpx;
		padding: 30rpx 20rpx 20rpx 20rpx;
		text-align: center;
		border-radius: 20rpx;
	}

	.click-btn {
		width: 80rpx;
		height: 80rpx;
		background-color: #44bbfc;
		border-radius: 100rpx;
		text-align: center;

	}

	.click-btn .icon {
		padding: 16rpx;
	}

	.nav-btn {
		display: flex;
		align-items: center;
		border: 0px #000 solid;
		min-width: 100rpx;
		padding: 12rpx 0;
		padding-bottom: 20rpx;
		border-radius: 10rpx;
	}

	.yes {
		background-color: #44bbfc;
		color: #fff;
	}

	.nav-icon {
		width: 60rpx;
		height: 60rpx;
		font-size: 15px;
		color: #fff;
	}

	.nav-icon image {
		width: 60rpx;
		height: 60rpx;
	}

	.nav-text {
		font-weight: 400;
		font-size: 30rpx;
		margin-left: 20rpx;
	}
</style>
